<template>
  <pageAboutBanner v-if="property.banner" :property="property"/>
  <PageAboutAuthentication v-if="property.certification" :certification="property.certification"/>
  <PageAboutRecruit v-if="property.article1" :article1="property.article1"/>
  <PageAboutService v-if="property.articleGroup" :articleGroup="property.articleGroup" />
  <PageAboutDigital v-if="property.digital || property.article2" :compInfo="property"/>
  <PageAboutVideo v-if="property.promotion" :Promotion="property.promotion"/>
  <PageAboutCompany v-if="property.map" :map="property.map"/>
  <pageDetailControl />

</template>

<script lang="ts" setup>
import type { TPromotion, TArticleGroup, TBannerObj } from '~/components/page/about/type';
type Tseo = {
  headTag: string;
  keyword: string;
  mainKeyword: string;
  meta: string;
};
type Tpage = {
  name: string;
  seoDTO: Tseo;
  property: Tproper;
};
type Tproper = {
  promotion: {
    title: string;
    list: TPromotion[];
  }
  banner: TBannerObj[];
  articleGroup: TArticleGroup;
  textNav: string;
}
let property = ref<Tproper>({
  banner: [],
  articleGroup: {
    list: [],
    article1: -1,
  },
  textNav: "",
  Promotion: [],
})
const getPage = async () => {
  const { data } = await useServerFetch<Tpage>("/app-api/promotion/diy-page/getByCode", {
    method: "get",
    query: {
      code: 'about',
    },
  });
  property.value = data.property
  useHead({
    title: data.name,
    meta: [
      {
        hid: data?.seoDTO?.keyword,
        name: data?.seoDTO?.mainKeyword,
        content: data?.seoDTO?.keyword + "," + data?.seoDTO?.meta + "," + data?.seoDTO?.headTag,
      },
    ],
  });
};
onMounted(() => {
  getPage();
});
</script>
